<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评论</title>
    <style>
        .comment-container {
            margin: 0px auto;
            width: 600px;
        }

        .comment-area {
            width: 600px;
            height: 200px;
            border: 1px solid gray;
            border-radius: 5px;
        }

        .face-container {
            margin-top: 10px;
            float: left;
        }

        .btn-face {
            border: 1px solid #444444;
            border-bottom: 1px solid white;
            cursor: pointer;
        }

        .btn-face.show-panel {
            border-bottom: 1px solid white;
        }

        .btn-face.hide-panel {
            border-bottom: 1px solid #444444;
        }

        .face-panel {
            width: 150px;
            height: 150px;
            border: 1px solid black;
            margin-top: -5px;
        }

        .face-panel.show {
            display: block;
        }

        .face-panel.hide {
            display: none;
        }

        .btn-commit {
            margin-top: 10px;
            float: right;
        }

        .face-icon {
            cursor: pointer;
            width: 30px;
            height: 28px;
            display: inline-block;
            border-right: 1px solid #444444;
            padding: 2px;
        }

        .face-icon:hover {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div class="comment-container">
        <ul class="comment-list" id="comment-list"></ul>
        <div class="comment-area" id="comment-area" contenteditable="true">测试window.getSelection()</div>
        <div class="face-container">
            <img class="btn-face hide-panel" id="btn-face" src="img/2.png">
            <div class="face-panel hide" id="face-panel">
            </div>
        </div>
        <button type="button" class="btn-commit" id="btn-commit" onclick="">提交评论</button>
    </div>
    <script>
        function FaceManager(parent) {
            this.parent = parent;
            this.buttonFace = parent.buttonFace;
            this.facePanel = parent.facePanel;
            this.faceNameList = parent.faceNameList;
            this.init();
        }
        FaceManager.prototype.init = function () {
            this._generateFaces();
            this._registerEvents();
        }
        FaceManager.prototype._generateFaces = function () {
            for (let index = 0; index < 16; index++) {
                const name = this.faceNameList[index % 3];
                var s = document.createElement("span");
                s.className = "face-icon";
                var i = document.createElement("img");
                i.setAttribute("src", `img/${name}.png`);
                i.dataset.name = name;
                s.appendChild(i);
                this.facePanel.appendChild(s);
            }
        }
        FaceManager.prototype._registerEvents = function () {
            var fmInstance = this;
            fmInstance.buttonFace.addEventListener("click", function () {
                if (fmInstance.buttonFace.className.indexOf("hide-panel") > -1) {
                    fmInstance.buttonFace.className = "btn-face show-panel";
                    fmInstance.facePanel.className = "face-panel show";
                } else {
                    fmInstance.buttonFace.className = "btn-face hide-panel";
                    fmInstance.facePanel.className = "face-panel hide";
                }
            });
            fmInstance.facePanel.addEventListener("click", function (e) {
                var img = null;
                if (e.target.className.indexOf("face-icon") > -1) {
                    img = e.target.firstElementChild;
                } else {
                    img = e.target;
                }
                fmInstance.insertFace(img.dataset.name);
            });
        }
        FaceManager.prototype.insertFace = function (name) {
            this.parent.insertFace(name);
            this.buttonFace.className = "btn-face hide-panel";
            this.facePanel.className = "face-panel hide";
        }

        function LeaveWord(config) {
            this.commentList = document.querySelector(config.commentList);
            this.commentArea = document.querySelector(config.commentArea);
            this.buttonFace = document.querySelector(config.buttonFace);
            this.facePanel = document.querySelector(config.facePanel);
            this.buttonCommit = document.querySelector(config.buttonCommit);
            this.faceManager = null;
            this.faceNameList = config.faceNameList;
            this.init();
        }
        LeaveWord.prototype.init = function () {
            this.faceManager = new FaceManager(this);
            this._registerEvents();
        }
        LeaveWord.prototype._registerEvents = function () {
            var lwInstance=this;
            lwInstance.buttonCommit.addEventListener("click", function () {
                var nodes = lwInstance.commentArea.childNodes;
                var datas = [];
                for (var index = 0; index < nodes.length; index++) {
                    var node = nodes[index];
                    if (node.nodeType === 3) {//text
                        datas.push(node.textContent || node.nodeValue || node.data);
                    } else {
                        datas.push('[img:' + node.dataset.name+"]");
                    }
                }
                debugger;
                console.log("msg:"+datas.join(""));
                var li=document.createElement("li");
                li.innerHTML=lwInstance.commentArea.innerHTML;
                lwInstance.commentList.appendChild(li);
                lwInstance.commentArea.innerHTML="";
            });
        }
        LeaveWord.prototype.insertFace = function (name) {
            var i = document.createElement("img");
            i.setAttribute("src", `img/${name}.png`);
            i.dataset.name = name;
            debugger;
            var selection = window.getSelection(); //获取选区集合
            if (selection.anchorNode.parentElement.className.indexOf("comment-area") <= -1) {
                return;
            }
            var range = selection.getRangeAt(0); //获取第一个选择
            range.deleteContents(); //删除选区选中的元素
            range.insertNode(i); //插入元素在选区的首位置
            range = range.cloneRange(); //克隆一个选区
            range.setStartAfter(i); //设置选区起点光标位置在指定元素的后面
            range.collapse(true);//合并起点、终点光标
            selection.removeAllRanges();//移除所有选区
            selection.addRange(range); //添加一个选区
        }
        //--------
        var lw = new LeaveWord({
            commentList: "#comment-list",
            commentArea: "#comment-area",
            buttonFace: "#btn-face",
            facePanel: "#face-panel",
            buttonCommit: "#btn-commit",
            faceNameList: ['1', '2', '3']
        })

    </script>
</body>

</html>